<template>
  <div class="chat-app cyber-theme">
    <div class="tech-bg-grid"></div>

    <aside :class="['sidebar', 'glass-panel', { 'sidebar-collapsed': sidebarCollapsed }]" ref="sidebar">
      <div class="sidebar-title-bar">
        <span class="sidebar-title">
          <span class="logo-text">GIM<span class="highlight">MSG</span></span>
        </span>
        <el-button icon="el-icon-arrow-left" @click="toggleSidebar" circle class="tech-btn-icon" v-show="isMobile" />
      </div>
      <div class="sidebar-search">
        <el-input v-model="search" placeholder="SEARCH DATA..." size="small" clearable class="tech-input-search">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <el-menu :default-active="activeMenu" class="sidebar-menu tech-menu" :collapse="sidebarCollapsed"
        @select="handleMenuSelect">
        <el-menu-item index="message">
          <i class="el-icon-chat-dot-square"></i>
          <span slot="title">通讯流</span>
          <el-badge :value="unreadTotal" class="menu-badge tech-badge" v-if="unreadTotal > 0" />
        </el-menu-item>
        <el-menu-item index="group">
          <i class="el-icon-connection"></i>
          <span slot="title">协作组</span>
        </el-menu-item>
        <el-menu-item index="setting">
          <i class="el-icon-setting"></i>
          <span slot="title">系统设置</span>
        </el-menu-item>
      </el-menu>
      
      <div class="sidebar-list custom-scrollbar">
        <div class="sidebar-list-title">ACTIVE LINKS</div>
        <div class="sidebar-list-scroll">
          <template v-if="filteredContacts.length > 0">
            <div v-for="contact in filteredContacts" :key="contact.UserID"
              :class="['contact-item', { active: contact.UserID === currentContactId }]"
              @click="selectContact(contact.UserID)">
              <div class="avatar-wrap">
                <img :src="contact.AvatarURL" class="avatar" />
                <span class="status-dot" :class="contact.Status === 'online' ? 'online' : 'offline'"></span>
              </div>
              <div class="contact-info">
                <div class="contact-top">
                  <span class="contact-name">{{ contact.UserName }}</span>
                  <span class="contact-time">{{ formatTime2(contact.LastOnlineTime) }}</span>
                </div>
                <div class="contact-bottom">
                  <span v-if="contact.lastMessageType === 'file'" class="msg-preview">
                    <i class="el-icon-document"></i> FILE
                  </span>
                  <span v-else class="msg-preview">{{ contact.lastMessage }}</span>
                </div>
              </div>
              <el-badge :value="contact.unread_count" class="contact-badge tech-badge" v-if="contact.unread_count > 0" />
            </div>
          </template>
          <el-empty v-else description="无链接信号" :image-size="60"></el-empty>
        </div>
      </div>
      
      <div class="sidebar-account">
        <div class="avatar-wrap mini">
           <img v-if="isOnline" :src="userInfo.avatarUrl" class="avatar" />
           <img v-else src="@/assets/images/common/default.jpg" class="avatar" />
           <div class="scan-line"></div>
        </div>
        <div class="account-info">
          <div class="account-name">{{ userInfo?.userName || 'GUEST_USER' }}</div>
          <div class="account-status">
            <span :class="['status-dot', isOnline ? 'online' : 'offline']"></span>
            {{ isOnline ? 'ONLINE' : 'OFFLINE' }}
          </div>
        </div>
        <el-button icon="el-icon-switch-button" class="tech-btn-icon danger" circle @click="logout"></el-button>
      </div>
    </aside>

    <main class="chat-main">
      <header class="chat-header glass-panel">
        <div class="chat-header-left">
          <el-button icon="el-icon-menu" @click="showSidebar" circle class="tech-btn-icon mobile-menu" v-show="isMobile" />
          <div class="avatar-wrap header-avatar">
            <img v-if="currentContactAvatar" :src="currentContactAvatar" class="avatar" />
            <img v-else src="@/assets/images/common/default.jpg" class="avatar" />
          </div>
          <div>
            <div class="chat-header-name">{{ currentContactName || '未选择终端' }}</div>
            <div class="chat-header-status">
              <span class="status-dot" :class="currentContactStatus === 'online' ? 'online' : 'offline'"></span>
              {{ statusText }}
            </div>
          </div>
        </div>
        <div class="chat-header-actions">
          <el-button icon="el-icon-search" circle class="tech-btn-icon" />
          <el-button icon="el-icon-phone-outline" circle class="tech-btn-icon" />
          <el-button icon="el-icon-more" circle class="tech-btn-icon" />
        </div>
      </header>

      <div class="chat-body custom-scrollbar" ref="chatBody">
        <div class="chat-date-divider">
          <span>SYSTEM LOG: {{ new Date().toLocaleDateString() }}</span>
        </div>
        
        <div v-for="msg in messages" :key="msg.messageId"
          :class="['chat-message', msg.senderId === userInfo.userId ? 'self' : 'other']">
          <img v-if="msg.senderId !== userInfo.userId" :src="currentContactAvatar" class="avatar msg-avatar" />
          
          <div class="msg-content-wrap">
            <div class="msg-meta" v-if="msg.senderId !== userInfo.userId">
              <span class="msg-name">{{ currentContactName }}</span>
              <span class="msg-time">{{ formatTime(msg.sendTime) }}</span>
            </div>

            <div v-if="msg.messageType === '文本'"
              :class="['msg-bubble', msg.senderId === userInfo.userId ? 'right' : 'left']">
              <span class="msg-text">{{ msg.content }}</span>
            </div>

            <div v-else-if="msg.messageType === '图片'"
              :class="['msg-bubble', msg.senderId === userInfo.userId ? 'right' : 'left']">
              <img :src="msg.attachment_url" class="msg-img" />
              <div class="msg-file-meta">IMG_DATA</div>
            </div>

            <div v-else-if="msg.messageType === '文件'"
              :class="['msg-bubble', msg.senderId === userInfo.userId ? 'right' : 'left']">
              <i class="el-icon-document"></i>
              <span>{{ msg.attachment_name }}</span>
            </div>
            
            <div class="msg-meta-bottom" v-if="msg.senderId === userInfo.userId">
               <span class="msg-time">{{ formatTime(msg.sendTime) }}</span>
               <i v-if="msg.readStatus === 'read'" class="el-icon-check" style="color:#00f2ff"></i>
            </div>
          </div>
        </div>

        <div v-if="isTyping" class="chat-message other">
          <img :src="currentContactAvatar" class="avatar msg-avatar" />
          <div class="msg-content-wrap">
            <div class="msg-bubble left typing-bubble">
              <span class="typing-dot"></span>
              <span class="typing-dot"></span>
              <span class="typing-dot"></span>
            </div>
          </div>
        </div>
      </div>

      <footer class="chat-footer glass-panel">
        <div class="chat-footer-actions">
          <el-button circle class="tech-btn-icon"><i class="el-icon-picture-outline"></i></el-button>
          <el-button circle class="tech-btn-icon"><i class="el-icon-folder-opened"></i></el-button>
          <div style="flex:1"></div>
        </div>
        <div class="chat-footer-input">
          <div class="input-wrapper">
             <el-input type="textarea" v-model="inputMessage" 
              :autosize="{ minRows: 2, maxRows: 2, maxHeight: 100 }"
              placeholder="输入指令..." ref="input" 
              @keydown.native="handleInputKeydown" 
              class="msg-input tech-textarea" />
          </div>
          <el-button type="primary" circle @click="sendMessage" class="send-btn">
             <i class="el-icon-position"></i>
          </el-button>
        </div>
      </footer>
    </main>
  </div>
</template>

<script>
// 逻辑代码保持完全不变
import moment from 'moment'
export default {
  name: 'ChatView',
  data() {
    return {
      sidebarCollapsed: false,  // 侧边栏是否折叠
      isMobile: false,// 是否为移动端
      search: '', // 搜索框内容
      activeMenu: 'message',// 当前激活的菜单项
      groups: [
        {
          group_id: '5',
          group_name: '产品开发组',
          group_avatar: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/15bd703716eb575eb049d376ef18625e.png',
          last_message_time: '10:25',
          last_message_author: '赵工程师',
          last_message: '后端API已经准备好了'
        },
        {
          group_id: '6',
          group_name: '市场部',
          group_avatar: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/2f7e3cc5e3e5a3d0e681096b58281846.png',
          last_message_time: '周五',
          last_message_author: '李营销',
          last_message: '新活动方案已更新'
        }
      ],// 群组列表
      currentContactId: '', // 当前选中的联系人或群组ID
      inputMessage: '',//输入框信息
      isTyping: false//是否正在输入
    };
  },
  computed: {
    isOnline() {
      return this.$store.getters['user/isLogin'];
    },
    // 当前联系人在线状态
    statusText() {
      return this.currentContact?.Status === 'online' ? '🟢 ONLINE' : '🔴 OFFLINE';
    },
    //查询用户列表
    userList() {
      return this.$store.getters['message/getUserList'];
    },
    // 当前登录用户信息
    userInfo() {
      return this.$store.state.user.userInfo || {}
    },
    /**
   * 根据搜索内容筛选联系人
   */
    filteredContacts() {
      if (!this.search) return this.userList;
      return this.userList.filter(c => c.UserName.includes(this.search) || c.UserIntroduction.includes(this.search));
    },
    /**
   * 根据搜索内容筛选群组
   */
    filteredGroups() {
      if (!this.search) return this.groups;
      return this.groups.filter(g => g.group_name.includes(this.search) || g.last_message.includes(this.search));
    },
    /**
     * 当前选中的联系人或群组对象
     */
    currentContact() {
      return (
        this.userList.find(c => c.UserID === this.currentContactId) ||
        this.groups.find(g => g.group_id === this.currentContactId) ||
        {}
      );
    },
    /**
     * 当前联系人或群组名称
     */
    currentContactName() {
      return this.currentContact.UserName || this.currentContact.group_name || '';
    },

    /**
     * 当前联系人或群组头像
     */
    currentContactAvatar() {
      return this.currentContact.AvatarURL || this.currentContact.group_avatar || '';
    },
    /**
     * 当前联系人在线状态
     */
    currentContactStatus() {
      return this.currentContact.Status || '';
    },
    /**
     * 所有联系人未读消息总数
     */
    unreadTotal() {
      return this.userList.reduce((sum, c) => sum + (c.unread_count || 0), 0);
    },
    // 从Vuex Store 中获取聊天信息
    messages() {
      console.log('this.currentContactId===' + this.currentContactId)
      console.log("获取聊天信息：", this.$store.getters['message/getMessages'](this.currentContactId));
      return this.$store.getters['message/getMessages'](this.currentContactId);
    },
  },
  methods: {
    /**
     * 切换侧边栏折叠状态
     */
    toggleSidebar() {
      this.sidebarCollapsed = !this.sidebarCollapsed;
    },
    /**
      * 显示侧边栏（移动端）
      */
    showSidebar() {
      this.sidebarCollapsed = false;
    },
    /**
      * 菜单选择事件处理
      * @param {string} index 选中的菜单项索引
      */
    handleMenuSelect(index) {
      this.activeMenu = index;
    },
    /**
      * 选择联系人或群组
      * @param {string} id 联系人或群组ID
      */
    selectContact(id) {
      this.currentContactId = id;
      // TODO: 加载对应聊天记录
    },
    /**
     * 格式化时间显示
     * @param {string} time 时间字符串
     * @returns {string}
     */
    formatTime(time) {
      if (!time) return '';

      const m = moment(time);

      if (!m.isValid()) return '';  // 防止非法时间格式

      return m.format('YYYY-MM-DD HH:mm:ss');  // 返回完整时间格式
    },
    formatTime2(time) {
      if (!time) return '';

      const m = moment(time);

      if (!m.isValid()) return '';  // 防止非法时间格式

      return m.format('HH:mm:ss');  // 返回完整时间格式
    },
    /**
      * 输入框键盘事件处理（回车发送消息）
      * @param {KeyboardEvent} e
      */
    handleInputKeydown(e) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        this.sendMessage();
      }
    },
    /**
     * 发送消息
     */
    sendMessage() {
      if (!this.inputMessage.trim()) return;

      console.log('[Chat] 💬 发送消息:', this.inputMessage)

      const content = this.inputMessage.trim();

      const receiverId = this.currentContactId;

      const senderId = this.userInfo.userId;

      const messagePayload = {
        messageId: 'client-' + Date.now(), // 临时 ID，后续可服务端回填
        senderId: senderId,//发送用户：先写死
        reciverId: receiverId,
        content,
        targetType: 'user',
        messageType: '文本',
        sendTime: new Date().toISOString(),
        readStatus: 'sent'
      };

      this.$ws.send(
        {
          cmd: 100001,
          data: {
            messageId: 'client-' + Date.now(),
            senderId: senderId,
            reciverId: receiverId,
            content: content,
            targetType: 'user',
            messageType: '文本',
            sendTime: new Date().toISOString(),
            readStatus: 'sent'
          }
        }
      )

      // 2️⃣ 同步写入 Vuex 消息模块（注意封装性）
      // 向某个会话追加一条消息
      this.$store.commit('message/ADD_MESSAGE', {
        contactId: receiverId,
        message: messagePayload
      });

      // ✅ 重置指定会话未读消息数为 0（已读）
      this.$store.commit('message/RESET_UNREAD', receiverId);

      console.log('用户 【111】消息为：===')
      console.log(this.$store.getters['message/getMessages']("111"))

      console.log('用户 【222】消息为：===')
      console.log(this.$store.getters['message/getMessages']("222"))

      //情况输入框并滚动到底部
      this.inputMessage = '';
      // 滚动到底部
      this.$nextTick(() => {
        if (this.$refs.chatBody) {
          this.$refs.chatBody.scrollTop = this.$refs.chatBody.scrollHeight;
        }
      });
    },
    /**
     * 退出登录
     */
    logout() {
      // TODO: 退出登录逻辑


      this.$store.dispatch('user/logout');

      this.$message.success('已退出登录');
    },
    /**
 * 根据窗口大小判断是否为移动端
 */
    handleResize() {
      this.isMobile = true
      if (this.isMobile) {
        this.sidebarCollapsed = true;
      } else {
        this.sidebarCollapsed = false;
      }
    }
  },
  mounted() {
    /** 查询用户列表 */
    if (this.$ws) {
      this.$ws.send({
        cmd: 100003,
        data: {}
      });
    }

    // 初始化时判断是否为移动端，并监听窗口大小变化
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
    // 聊天区域滚动到底部
    this.$nextTick(() => {
      if (this.$refs.chatBody) {
        this.$refs.chatBody.scrollTop = this.$refs.chatBody.scrollHeight;
      }
    });
  },
  beforeDestroy() {
    // 移除窗口大小变化监听
    window.removeEventListener('resize', this.handleResize);

  }
};
</script>

<style scoped lang="less">
/* ================= 赛博朋克主题变量 ================= */
@bg-dark: #0f1219;
@bg-panel: rgba(26, 31, 44, 0.7);
@bg-message-other: rgba(255, 255, 255, 0.05);
@primary-color: #00f2ff; /* 赛博青 */
@accent-color: #7d2ae8;  /* 霓虹紫 */
@text-main: #e2e8f0;
@text-sub: #94a3b8;
@border-color: rgba(255, 255, 255, 0.08);

/* ================= 基础布局 ================= */
.chat-app {
  display: flex;
  height: 83vh;
  background-color: @bg-dark;
  font-family: 'Inter', 'Courier New', monospace;
  overflow: hidden;
  position: relative;
  color: @text-main;
}

/* 背景网格装饰 */
.tech-bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(@border-color 1px, transparent 1px),
    linear-gradient(90deg, @border-color 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

/* 玻璃拟态面板通用类 */
.glass-panel {
  background: @bg-panel;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid @border-color;
  box-shadow: 5px 0 20px rgba(0,0,0,0.3);
}

/* ================= 侧边栏 ================= */
.sidebar {
  width: 280px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &.sidebar-collapsed {
    width: 0 !important;
    overflow: hidden;
  }
}

.sidebar-title-bar {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid @border-color;
  
  .sidebar-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
    
    .highlight {
      color: @primary-color;
      text-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
    }
  }
}

/* 搜索框 */
.sidebar-search {
  padding: 16px;
  
  ::v-deep .tech-input-search .el-input__inner {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid @border-color;
    color: #fff;
    border-radius: 4px;
    height: 36px;
    &:focus {
      border-color: @primary-color;
      box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
    }
  }
  
  ::v-deep .el-input__icon {
    color: @text-sub;
  }
}

/* 导航菜单 */
.tech-menu {
  background: transparent !important;
  border-right: none !important;
  
  ::v-deep .el-menu-item {
    height: 50px;
    line-height: 50px;
    color: @text-sub;
    border-left: 3px solid transparent;
    transition: all 0.3s;
    
    i { color: @text-sub; font-size: 18px; margin-right: 10px; }
    
    &:hover, &:focus {
      background: rgba(255, 255, 255, 0.05) !important;
      color: #fff;
      i { color: #fff; }
    }
    
    &.is-active {
      background: linear-gradient(90deg, rgba(0, 242, 255, 0.1), transparent) !important;
      color: @primary-color;
      border-left-color: @primary-color;
      text-shadow: 0 0 8px rgba(0, 242, 255, 0.4);
      i { color: @primary-color; }
    }
  }
}

/* 联系人列表 */
.sidebar-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  .sidebar-list-title {
    font-size: 10px;
    color: @text-sub;
    padding: 10px 20px;
    letter-spacing: 1px;
    opacity: 0.7;
  }
  
  .sidebar-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 10px;
  }
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;

  &:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
  }
  
  &.active {
    background: rgba(125, 42, 232, 0.15);
    border-color: rgba(125, 42, 232, 0.3);
    
    .contact-name { color: @primary-color; }
  }
}

.avatar-wrap {
  position: relative;
  margin-right: 12px;
  
  .avatar {
    width: 42px;
    height: 42px;
    border-radius: 8px; /* 方形圆角更具科技感 */
    border: 1px solid rgba(255,255,255,0.1);
    object-fit: cover;
  }
  
  .status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid @bg-dark;
    
    &.online { background: #10b981; box-shadow: 0 0 5px #10b981; }
    &.offline { background: #64748b; }
  }
}

.contact-info {
  flex: 1;
  min-width: 0;
  
  .contact-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    
    .contact-name { font-size: 14px; font-weight: 600; color: #fff; }
    .contact-time { font-size: 11px; color: @text-sub; font-family: 'Consolas', monospace; }
  }
  
  .contact-bottom {
    .msg-preview { font-size: 12px; color: @text-sub; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  }
}

/* 侧边栏底部用户 */
.sidebar-account {
  padding: 16px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid @border-color;
  display: flex;
  align-items: center;
  
  .account-info {
    flex: 1;
    margin-left: 10px;
    
    .account-name { font-size: 14px; color: #fff; font-weight: bold; }
    .account-status { font-size: 10px; color: @primary-color; margin-top: 2px; letter-spacing: 1px; }
  }
}

/* ================= 主聊天区 ================= */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(15, 18, 25, 0.6); /* 透出一点背景网格 */
  position: relative;
  z-index: 1;
}

/* 聊天头部 */
.chat-header {
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid @border-color;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .chat-header-name {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
  }
  
  .chat-header-status {
    font-size: 12px;
    color: @text-sub;
    margin-top: 2px;
    font-family: 'Consolas', monospace;
  }
}

/* 科技感按钮通用 */
.tech-btn-icon {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: @text-sub !important;
  transition: all 0.3s;
  
  &:hover {
    color: @primary-color !important;
    border-color: @primary-color !important;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
    background: rgba(0, 242, 255, 0.05) !important;
  }
  
  &.danger:hover {
    color: #ff4d4f !important;
    border-color: #ff4d4f !important;
    box-shadow: 0 0 10px rgba(255, 77, 79, 0.2);
  }
}

/* 聊天内容区 */
.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  
  .chat-date-divider {
    text-align: center;
    margin: 20px 0;
    
    span {
      background: rgba(255,255,255,0.05);
      padding: 4px 12px;
      border-radius: 4px;
      font-size: 11px;
      color: @text-sub;
      font-family: 'Consolas', monospace;
      border: 1px solid rgba(255,255,255,0.05);
    }
  }
}

/* 消息气泡 */
.chat-message {
  display: flex;
  margin-bottom: 24px;
  
  &.self {
    flex-direction: row-reverse;
    .msg-content-wrap { align-items: flex-end; }
  }
  
  .msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  
  .msg-content-wrap {
    max-width: 70%;
    display: flex;
    flex-direction: column;
    margin: 0 12px;
  }
  
  .msg-meta {
    margin-bottom: 6px;
    .msg-name { color: @text-sub; font-size: 12px; margin-right: 8px; }
    .msg-time { color: rgba(255,255,255,0.3); font-size: 11px; font-family: monospace; }
  }
  
  .msg-bubble {
    padding: 12px 16px;
    position: relative;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-all;
    
    /* 对方气泡 */
    &.left {
      background: @bg-message-other;
      border: 1px solid rgba(255,255,255,0.08);
      color: @text-main;
      border-radius: 0 12px 12px 12px;
      
      &:before {
        content: '';
        position: absolute;
        top: 0; left: -4px;
        width: 8px; height: 8px;
        border-top: 1px solid rgba(255,255,255,0.08);
        border-left: 1px solid rgba(255,255,255,0.08);
        background: inherit;
        transform: rotate(-45deg);
      }
    }
    
    /* 自己气泡 */
    &.right {
      background: linear-gradient(135deg, rgba(0, 242, 255, 0.1), rgba(125, 42, 232, 0.15));
      border: 1px solid rgba(0, 242, 255, 0.3);
      color: #fff;
      border-radius: 12px 0 12px 12px;
      box-shadow: 0 0 15px rgba(0, 242, 255, 0.05);
      
      &:before {
        content: '';
        position: absolute;
        top: 0; right: -4px;
        width: 8px; height: 8px;
        border-top: 1px solid rgba(0, 242, 255, 0.3);
        border-right: 1px solid rgba(0, 242, 255, 0.3);
        background: rgba(125, 42, 232, 0.15); /* Match gradient end */
        transform: rotate(45deg);
      }
    }
    
    .msg-img {
      max-width: 240px;
      border-radius: 4px;
      border: 1px solid rgba(255,255,255,0.1);
    }
    
    .msg-file-meta {
      font-size: 10px;
      color: rgba(255,255,255,0.5);
      margin-top: 4px;
      letter-spacing: 1px;
    }
  }
  
  .msg-meta-bottom {
    margin-top: 6px;
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    font-family: monospace;
    display: flex;
    align-items: center;
    gap: 5px;
  }
}

/* 正在输入动画 */
.typing-bubble {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px !important;
}
.typing-dot {
  width: 4px; height: 4px;
  background: @primary-color;
  border-radius: 50%;
  animation: typing 1.4s infinite ease-in-out both;
  
  &:nth-child(1) { animation-delay: -0.32s; }
  &:nth-child(2) { animation-delay: -0.16s; }
}
@keyframes typing {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* 底部输入框 */
.chat-footer {
  padding: 16px 24px;
  border-top: 1px solid @border-color;
  background: @bg-panel;
  
  .chat-footer-actions {
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
  }
  
  .chat-footer-input {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    
    .input-wrapper {
      flex: 1;
      background: rgba(0,0,0,0.3);
      border: 1px solid @border-color;
      border-radius: 8px;
      padding: 4px;
      transition: all 0.3s;
      
      &:focus-within {
        border-color: @primary-color;
        box-shadow: 0 0 10px rgba(0, 242, 255, 0.1);
      }
    }
    
    .send-btn {
      width: 42px; height: 42px;
      background: linear-gradient(135deg, @primary-color, @accent-color);
      border: none;
      box-shadow: 0 4px 10px rgba(0, 242, 255, 0.3);
      font-size: 18px;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 242, 255, 0.5);
      }
    }
  }
}

/* 深度覆盖输入框样式 */
::v-deep .tech-textarea .el-textarea__inner {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-family: inherit;
  box-shadow: none !important;
  
  &::placeholder { color: rgba(255,255,255,0.3); }
}

/* Badge 样式覆盖 */
::v-deep .tech-badge .el-badge__content {
  background-color: #ff4d4f;
  border: none;
  box-shadow: 0 0 5px #ff4d4f;
  color: #fff;
}

/* 自定义滚动条 */
.custom-scrollbar {
  &::-webkit-scrollbar { width: 4px; }
  &::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
  &::-webkit-scrollbar-track { background: transparent; }
}

@media (max-width: 768px) {
  .chat-app { height: 100vh; }
  .sidebar { position: absolute; height: 100%; box-shadow: 10px 0 30px rgba(0,0,0,0.5); }
}
</style>